import React from 'react';

import styles from './LoginModel.css';

import {Modal, Button, Input, Icon, message} from 'antd';
import {LoginModelPros} from "./LoginModelPros";
import Form from "antd/lib/form/Form";
import LoginService from "../business/login/LoginService";
import {ResponseBody} from "./http/ResponseBody";

class LoginModel extends React.Component<LoginModelPros,{}> {
  constructor(props){
    super(props)
    this.state = {  modal2Visible:false,}
    this.loginService = new LoginService();
    this.handleChange = this.handleChange.bind(this);
    this.loginCallBack = this.loginCallBack.bind(this);
    this.adminLoginCallBack = this.adminLoginCallBack.bind(this);

  }

  loginService :LoginService;


  setModal2Visible(modal2Visible) {
    this.props.funcDis();
    if(!modal2Visible){
      this.state["username"]='';
      this.state["password"]='';
    }
  }

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value});
  }

  handleSubmit = (e) => {
    e.preventDefault();
  }

  loginCallBack(data:ResponseBody<any>,isSuccess,req){
    if(!isSuccess){
      message.info(data.message);
    }else{
      if(data.code == "200"){
        sessionStorage.setItem("loginToken",data.data.toString());
        sessionStorage.setItem("username",req.username);
        this.setModal2Visible(false);

      }else {
        message.info(data.message);
      }
    }
    this.setState({ loading: false });
  }

  adminLoginCallBack(data:ResponseBody<any>,isSuccess,req){
    if(!isSuccess){
      message.info(data.message);
    }else{
      if(data.code == "200"){
        sessionStorage.setItem("adminLoginToken",data.data.toString());
        sessionStorage.setItem("adminUsername",req.username);
        this.setModal2Visible(false);
        window.document.location.href='/point-shopping/admin';
      }else {
        message.info(data.message);
      }
    }
    this.setState({ loading: false });
  }

  handleOk = () => {
    this.setState({ loading: true });
    let username = this.state["username"];
    let password = this.state["password"];
    if(username == undefined ||username == ''){
      message.info("用户名不能为空");
      return;
    }
    if(password == undefined ||password == ''){
      message.info("密码不能为空");
      return;
    }
    const data ={
      "username":username,
      "password":password,
    };
    const {isAdmin} = this.props;

    if(isAdmin){
      this.loginService.adminLogin(data,this.adminLoginCallBack);
    }else{
      this.loginService.userLogin(data,this.loginCallBack);
    }

  }



  showModelTitle(isAdmin:boolean){
      if(isAdmin){
        return "管理员登陆(没有账号请先注册)";
      }else{
        return "域账号登陆(开机密码)";
      }
  }



  render() {
    const {isAdmin} = this.props;
    return (
      <div>
        <Modal
          width="350px"
          title={this.showModelTitle(isAdmin)}
          centered
          visible={this.props.visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
          footer={[<Button key="submit" type="primary" loading={this.state["loading"]} onClick={this.handleOk}>
            登陆
          </Button>]}
        >
          <Form onSubmit={this.handleSubmit} className={styles["login-form"]}>
            <div className={styles["login-div"]}>
            <Form.Item >
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                   placeholder="Username" value={this.state["username"]}
                   name='username' onChange={this.handleChange}/>

            </Form.Item>
            </div>
            <div className={styles["login-div"]}>
            <Form.Item >
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                       type="password" placeholder="Password" value={this.state["password"]}
                       name='password' onChange={this.handleChange}/>

            </Form.Item>
            </div>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default LoginModel
